<template>
	<view>
		<uni-row class="demo-uni-row">
		    <uni-col :span="6">
				<view class="" style="text-align: center;">
					 <image :src="avatar?avatar:'/static/image/person.png'" mode="aspectFit" style="width: 100rpx;height: 100rpx;border-radius: 50%;"></image>
				</view>
		    </uni-col>
			<uni-col :span="12">
			    <view class="" v-if="hasLogin">
					<text>{{userInfor.userInfo&&userInfor.userInfo.nickname || userInfor.userInfo&&userInfor.userInfo.nickName}}</text>
					<view class="">
						<text>{{userInfor.userInfo&&userInfor.userInfo.username?userInfor.userInfo.username:'未填写'}}</text>
						<!-- <text>地址</text> -->
					</view>
				</view>
				<text v-else>您未登录</text>
			</uni-col>
			<uni-col :span="6" @click.native="goPages">
			    <view class="" style="text-align: right;">
					<uni-icons type="arrowright" size="20" color="#8f8f8f"></uni-icons>
				</view>
			</uni-col>
		</uni-row>
		<uni-list>
			<uni-list-item title="设置" link to="" :show-extra-icon="true" :extra-icon="extraIcon1"></uni-list-item>
			<uni-list-item title="账号安全" link to="/pages/person/account" :show-extra-icon="true" :extra-icon="extraIcon2"></uni-list-item>
			<uni-list-item v-if="hasLogin" title="退出登录" @click="exit" clickable :show-extra-icon="true" :extra-icon="extraIcon2"></uni-list-item>
			<uni-list-item title="登录" clickable :show-extra-icon="true" :extra-icon="extraIcon2" to="/pages/login/login"></uni-list-item>
			<uni-list-item title="进入聊天" clickable :show-extra-icon="true" :extra-icon="extraIcon2" to="/uni_modules/uni-im/pages/userList/userList"></uni-list-item>
			<!-- #ifdef MP-WEIXIN -->
			<uni-list-item title="进入小程序客服" clickable :show-extra-icon="true" :extra-icon="extraIcon2" to="/pages/mini-kefu/mini-kefu"></uni-list-item>
			<!-- #endif -->
		</uni-list>
	</view>
</template>

<script>
	import {mapGetters,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				extraIcon1:{color: '#8f8f8f',size: '22',type: 'gear-filled'},
				extraIcon2:{color: '#8f8f8f',size: '22',type: 'locked-filled'}
			}
		},
		computed:{
			...mapGetters({
				userInfor:'user/info',
				hasLogin:'user/hasLogin'
			}),
			avatar(){
				if(this.userInfor.userInfo&&this.userInfor.userInfo.avatar){
					return this.userInfor.userInfo.avatar
				}else{
					
				}
			}
		},
		methods: {
			...mapMutations({
				setUserInfo:'user/login',
				logout:'user/logout'
			}),
			goPages(){
				// uni.navigateTo({
				// 	url:'/pages/person/infor'
				// })
				// return
				// console.log(this.userInfor)
				// return
				// 进入个人信息设置
				if(this.hasLogin){
					uni.navigateTo({
						url:'/pages/person/infor'
					})
				}else{
					// 进入登陆
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}
			},
			// 退出登录
			exit(){
				uniCloud.callFunction({
					name:'uni-id-cf',
					data:{
						action:'logout',
						params:{}
					},
					success: ({result}) => {
						console.log(result)
						if(result.code==0){
							this.logout()
						}else{
							uni.showToast({
								title:result.msg,
								icon:'none'
							})
						}
					}
				})
			}
		},
		onLoad() {
			console.log('数据啊')
			console.log(this.userInfor)
		}
	}
</script>

<style scoped>
.demo-uni-row {	
	/* #ifdef MP-TOUTIAO ||MP-QQ||MP-BAIDU */
	display: block;
	/* #endif */
	display: flex;
	padding:0 30rpx 20rpx;
	background-color: #F8F8F8;
	align-items: center;
}

/* 支付宝小程序没有 demo-uni-row 层级 */
/* 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级 */
/* #ifdef MP-ALIPAY || MP-WEIXIN */
/deep/ .uni-row {
    display: flex;
    padding:0 30rpx 20rpx;
    background-color: #F8F8F8;
    align-items: center;
}
/* #endif */
</style>
